<template>
    <div id="contain" class="content-inner">
        <!-- 内容区头部 -->
        <header class="pageme-header">
            <!-- 面包屑 -->
            <Breadcrumb>
                <BreadcrumbItem to="/admin/home">主页</BreadcrumbItem>
                <BreadcrumbItem>评论管理</BreadcrumbItem>
                <BreadcrumbItem>求购评论</BreadcrumbItem>
            </Breadcrumb>
        </header>
        <div class="content-main">
            <!-- 内容区域显示部分 -->
            <div class="contain-main-show">
                <div class="myinfo-item" v-for="item in wantGoodsComment" :key="item.wgcId">
                    <div class="msg-info">
                        <span class="msg-type">求购</span>
                        <span class="msg-title">{{item.users.uName}}</span>
                    </div>
                    <div class="comment-content">
                        <div class="comment-left">
                            <img :src="item.mainPic" alt="">
                            <div class="comment-title">
                                <p class="content">{{item.wantGoods.wgTitle}}</p>
                                <p>{{item.wgcContent}}</p>
                            </div>
                        </div>
                        <div class="comment-right">
                            <a href="javascript:void(0)" @click.prevent="deleteById(item.wgcId)"><Icon type="md-trash" /></a>
                            <span>{{item.wgcTime | dataFormat}}</span>
                        </div>
                    </div>
                </div>
                <div class="page-all">
                  <Page :total="allPages.total" :page-size="pageSize"
                  :current="pageNum" @on-change="changePage"/>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'wantComments',
  data () {
    return {
      pageSize: 4, // 每页显示多少条
      allPages: [], // 存放分页2的信息
      pageNum: 1, // 默认展示第一页数据
      wantGoodsComment: [] // 商品评论
    }
  },
  created () {
    this.findAll()
  },
  methods: {
    // 根据用户id查询该用户发布的所有求购评论
    findAll () {
      this.$axios({
        url: 'wantGoodsComment/findAll',
        method: 'get',
        params: {
          pageNo: this.pageNum,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.wantGoodsComment = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
          this.wantGoodsComment.forEach(item => {
            this.$axios({
              url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wantGoods.wgId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.wgpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNum = index
      this.findAll()
    },
    // 根据评论id删除此求购评论(如果该评论是父评论，删除此父评论的同时，也会删除相关的子评论哦)
    deleteById (id) {
      this.$axios({
        url: 'wantGoodsComment/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findAll()
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.myinfo-item {
    border-bottom: 1px solid rgb(219, 219, 219);
}
.page-all{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
/* 主要内容区域 */
.content-inner{
    width: 100%;
    height: calc(100% - 60px);
    min-height: 495px;
}
/* 内容区头部 */
header.pageme-header{
    width: 100%;
    height: 50px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
}
/* 内容区域 */
.content-main{
    width: 100%;
    height:auto;
    padding: 15px;
}
/* 内容区域显示部分 */
.contain-main-show{
    width: 100%;
    height: auto;
}

.msg-info {
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.msg-unread {
    width: 6px;
    height: 6px;
    display: inline-block;
    background: #ca0c16;
    border-radius: 50%;
    margin-right: 5px;
}
.msg-type {
    display: inline-block;
    width: 36px;
    height: 20px;
    color: #4d4d4d;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    vertical-align: top;
    margin-right: 5px;
}
.msg-title {
    width:75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #4d4d4d;
    display: inline-block;
    font-size: 14px;
}
.msg-option {
    width:20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.date {
    color:#6b6b6b;
    font-size: 12px;
}
.delete {
    color: #4d4d4d;
}
.drop-content {
    padding: 10px;
    background-color: #f7f7f7;
    font-size: 14px;
    color: #4d4d4d;
    margin:10px 0;
}
.top2-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}
.comment-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    margin-bottom: 10px;
}
.comment-left {
    width: 79%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.comment-left img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}
.comment-title {
    width: calc(100% - 50px);
}
.comment-title p {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
.comment-right {
    width: 17%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.comment-right a {
    color: #4d4d4d;
}
.content {
    font-size: 13px;
    color:#9b9b9b;
}
</style>
